<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>系统管理</title>
    <link href="/common/icon2.png" type="image/png" rel="shortcut icon">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>

<div class="layui-container" style="margin-top: 50px;width: 1400px;">
    <div class="layui-tab layui-tab-brief" lay-filter="settingsTab">
        <ul class="layui-tab-title">
            <li class="layui-this">网站设置</li>
            <li lay-id="series-list">系列管理</li>
            <li>添加系列</li>
        </ul>
        <div class="layui-tab-content" style="padding-top: 20px;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">加密密钥</label>
                        <div class="layui-input-block">
                            <input name="loginSalt" placeholder="加密密钥" class="layui-input" th:value="${config.salt}"
                                   disabled readonly style="background: #eeeeee;"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">当前密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="loginPass" placeholder="当前登录密码" class="layui-input"
                                   style="width: 250px;"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">登录密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="loginPass2" placeholder="新的登录密码" class="layui-input"
                                   style="width: 250px;"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">图片路径</label>
                        <div class="layui-input-block">
                            <input name="fileDownloadPath" placeholder="抓取的文章内容中的图片下载到本地的路径地址（斜杠结尾）" class="layui-input"
                                   th:value="${config.fileDownloadPath}"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">页面大小</label>
                        <div class="layui-input-block">
                            <input name="pageSize" placeholder="文章列表页面显示数量" class="layui-input" type="number"
                                   style="width: 200px;"
                                   th:value="${config.pageSize}"/>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">驱动路径</label>
                        <div class="layui-input-block">
                            <input name="webDriverPath" placeholder="selenium driver 驱动所在路径（斜杠结尾）" class="layui-input"
                                   th:value="${config.webDriverPath}"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="config">提交</button>
                            <a class="layui-btn layui-btn-primary" href="/">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <table id="series-table" class="layui-table" lay-filter="series-table"></table>
                <div class="layui-row"><a class="layui-btn layui-btn-primary" href="/">返回首页</a></div>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" id="addSeries">
                    <div class="layui-form-item">
                        <label class="layui-form-label">系列名称</label>
                        <div class="layui-input-block">
                            <input name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                                   class="layui-input" style="width: 200px;">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">系列描述</label>
                        <div class="layui-input-block">
                            <input name="tips" lay-verify="title" autocomplete="off" placeholder="请输入描述"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addSeries">立即提交</button>
                            <a class="layui-btn layui-btn-primary" href="/">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/layui/layui.js"></script>
<script th:inline="javascript">
    layui.use(['form', 'jquery', 'element', 'table'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var element = layui.element;
        var table = layui.table;


        //监听提交
        form.on('submit(config)', function (data) {
            $.post("/system/config/edit", data.field, function (resp) {
                layer.msg(resp.msg);
            });
            return false;
        });

        var tableIns = table.render({
            elem: '#series-table'
            , url: '/system/series/list'
            , method: 'post'
            , contentType: "application/json"
            , cols: [
                [
                    {field: 'id', title: 'ID', width: 80, hide: true}
                    , {field: 'name', sort: true, title: '系列名称', width: 120, edit: 'text'}
                    , {field: 'tips', title: '系列描述', edit: 'text'}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]
            ]
            , page: true
            , parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.total,
                    "data": res.data.records
                };
            }
            , request: {
                pageName: 'pageNo'
                , limitName: 'pageSize'
            }
        });

        //监听单元格编辑
        table.on('edit(series-table)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            var dataObj = {};
            dataObj.id = data.id;
            dataObj[field] = value;
            $.post("/system/series/edit", dataObj, function (resp) {
                if (resp.code === 0) {
                    tableIns.reload({page: {curr: 1}});
                }
                layer.msg("修改成功");
            });
        });

        //监听行工具事件
        table.on('tool(series-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('确认删除【' + data.name + '】吗？', function (index) {
                    $.post("/system/series/delete", {id: data.id}, function (resp) {
                        if (resp.code === 0) {
                            tableIns.reload({page: {curr: 1}});
                        }
                        layer.msg(resp.msg);
                    });
                    layer.close(index);
                });
            }
        });

        form.on('submit(addSeries)', function (data) {
            $.post("/system/series/add", data.field, function (resp) {
                if (resp.code === 0) {
                    document.getElementById("addSeries").reset();
                    tableIns.reload({page: {curr: 1}});
                    element.tabChange('settingsTab', 'series-list');
                }
                layer.msg(resp.msg);
            })
            return false;
        });

    });
</script>
</body>
</html>